<template>
  <el-form  @change="typeChange" clearable ref="form" v-model="queryInfo.questionType" label-width="80px" placeholder="请选择题目类型">

    <el-form-item label="生成类型">
      <el-select v-model="questionForm.quType" placeholder="请选择活动区域">
        <el-option
          v-for="item in questionType"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="错题分类">
      <el-select @change="bankChange" clearable v-model="questionForm.quBankId" placeholder="请选择题库"

                 style="margin-left: 5px">
        <el-option
          v-for="item in allBank"
          :key="item.id"
          :label="item.bankName"
          :value="item.bankId">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="错题">
      <el-input type="textarea"
                autosize
                placeholder="请输入错题"
                v-model="questionForm.analysis"></el-input>
    </el-form-item>

<!--    <el-form-item label="题目难度">-->
<!--      <el-select v-model="questionForm.level" placeholder="请选择活动区域">-->
<!--        <el-option label="麻瓜难度" value="1"></el-option>-->
<!--        <el-option label="黄金难度" value="2"></el-option>-->
<!--        <el-option label="钻石难度" value="3"></el-option>-->
<!--        <el-option label="王者难度" value="4"></el-option>-->
<!--      </el-select>-->
<!--    </el-form-item>-->
    <el-form-item label="生成题目道">
      <el-input v-model="cntpostquestion"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="cntPostQuestion">立即生成</el-button>
      <el-button>取消</el-button>
    </el-form-item>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>题目如下</span>
      </div>
      <div v-for="(questionItem,index) of questionItems" :key="questionItem.id" class="text item">
        {{questionItem.quContent}}
      </div>
    </el-card>

    <el-button type="text" @click="dialogVisible = true">点击打开 解析</el-button>
    <el-dialog
      title="解析"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div v-for="(questionItem,index) of questionItems" :key="questionItem.id" class="text item">
        {{questionItem.analysis}}
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>


  </el-form>
</template>

<script>
import question from "@/api/question";
import questionBank from '@/api/questionBank'

export default {
  data() {
    return {
      dialogVisible: false,
      addFormRules: {
        bankId: [
          {
            required: true,
            message: '请选择需要添加进的题库',
            trigger: 'blur'
          }
        ]
      },
      addForm: {
        bankId: ''
      },
      queryInfo: {
        //题目类型下拉款所选的内容
        'questionType': '',
        'questionBank': '',
        'questionContent': '',
        'pageNo': 1,
        'pageSize': 10
      },
      questionType: [
        {
          id: 1,
          name: '单选题',
        },
        {
          id: 2,
          name: '多选题',
        },
        {
          id: 3,
          name: '判断题',
        },
        {
          id: 4,
          name: '简答题',
        },
      ],
      questionForm: {
        quType: '',
        quBankName: '',
        level: '',
        analysis: '',
        quBankId: '',
        createPerson: localStorage.getItem("username")
      },
      cntpostquestion: 1,
      questionItems: [],
      allBank: [],
    }
  },
  created () {
    this.getQuestionBankInfo()
    this.getQuestionInfo()
  },
  methods:{
    //解析处理
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //获取所有的题库信息
    getQuestionBankInfo () {
      questionBank.getQuestionBank().then((resp) => {
        if (resp.code === 200) {
          this.allBank = resp.data
        }
      })
    },
    //题目类型变化
    typeChange (val) {
      this.queryInfo.questionType = val
      this.getQuestionInfo()
    },

    bankChange (val) {
      this.queryInfo(val)
      this.getQuestionInfo()
    },
    cntPostQuestion(){
      for(let i=0;i<this.cntpostquestion;i++){
        this.postQuestionV0()
      }
    },
    postQuestionV0(){
      question.wrongQuestionProduce(this.questionForm).then((resp)=>{
        if (resp.code === 200) {
          console.log(resp.data)
          console.log(resp.data)
          this.questionItems.push(resp.data)
          this.$notify({
            title: 'Tips',
            message: '新增题目成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
  }
}
</script>
<style scoped lang="scss">
.el-container {
  animation: leftMoveIn .7s ease-in;
}

@keyframes leftMoveIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>
